<template>
  <div>
    <div class="test">
      <n-space>
        <n-button>Default</n-button>
        <n-button type="tertiary"> Tertiary </n-button>
        <n-button type="primary"> Primary </n-button>
        <n-button type="info"> Info </n-button>
        <n-button type="success"> Success </n-button>
        <n-button type="warning"> Warning </n-button>
        <n-button type="error"> Error </n-button>
      </n-space>
    </div>

    <div class="test">
      <n-space>
        <n-button strong secondary> Default </n-button>
        <n-button strong secondary type="tertiary"> Tertiary </n-button>
        <n-button strong secondary type="primary"> Primary </n-button>
        <n-button strong secondary type="info"> Info </n-button>
        <n-button strong secondary type="success"> Success </n-button>
        <n-button strong secondary type="warning"> Warning </n-button>
        <n-button strong secondary type="error"> Error </n-button>
        <n-button strong secondary round> Default </n-button>
        <n-button strong secondary round type="primary"> Primary </n-button>
        <n-button strong secondary round type="info"> Info </n-button>
        <n-button strong secondary round type="success"> Success </n-button>
        <n-button strong secondary round type="warning"> Warning </n-button>
        <n-button strong secondary round type="error"> Error </n-button>
        <n-button strong secondary circle>
          <template #icon>
            <n-icon><CashIcon /></n-icon>
          </template>
        </n-button>
        <n-button strong secondary circle type="primary">
          <template #icon>
            <n-icon><CashIcon /></n-icon>
          </template>
        </n-button>
        <n-button strong secondary circle type="info">
          <template #icon>
            <n-icon><CashIcon /></n-icon>
          </template>
        </n-button>
        <n-button strong secondary circle type="success">
          <template #icon>
            <n-icon><CashIcon /></n-icon>
          </template>
        </n-button>
        <n-button strong secondary circle type="warning">
          <template #icon>
            <n-icon><CashIcon /></n-icon>
          </template>
        </n-button>
        <n-button strong secondary circle type="error">
          <template #icon>
            <n-icon><CashIcon /></n-icon>
          </template>
        </n-button>
      </n-space>
    </div>

    <div class="test">
      <n-card title="卡片">
        <n-space>
          <n-tag> 爱在西元前 </n-tag>
          <n-tag type="success"> 不该 </n-tag>
          <n-tag type="warning"> 超人不会飞 </n-tag>
          <n-tag type="error"> 手写的从前 </n-tag>
          <n-tag type="info"> 哪里都是你 </n-tag>
        </n-space>

        <n-space item-style="display: flex;" align="center">
          <n-checkbox v-model:checked="value"> 复选框 </n-checkbox>
          <n-checkbox v-model:checked="value" />
          <n-checkbox v-model:checked="value" :disabled="disabled">
            复选框
          </n-checkbox>
          <n-button size="small" @click="disabled = !disabled"> 禁用 </n-button>
        </n-space>

        <n-space vertical>
          <n-slider v-model:value="value" :step="10" />
          <n-input-number v-model:value="value" size="small" />
        </n-space>
      </n-card>
    </div>

    <div class="test">
      <n-tabs type="line" animated>
        <n-tab-pane name="oasis" tab="Oasis"> Wonderwall </n-tab-pane>
        <n-tab-pane name="the beatles" tab="the Beatles"> Hey Jude </n-tab-pane>
        <n-tab-pane name="jay chou" tab="周杰伦"> 七里香 </n-tab-pane>
      </n-tabs>
    </div>

    <div class="test">
      <n-space vertical :size="12">
        <n-alert title="Default 类型" type="default">
          <template #icon>
            <n-icon>
              <IosAirplane />
            </n-icon>
          </template>
          Gee it's good to be back home
        </n-alert>
        <n-alert title="Info 类型" type="info">
          Gee it's good to be back home
        </n-alert>
        <n-alert title="Success 类型" type="success">
          Leave it till tomorrow to unpack my case
        </n-alert>
        <n-alert title="Warning 类型" type="warning">
          Honey disconnect the phone
        </n-alert>
        <n-alert title="Error 类型" type="error">
          I'm back in the U.S.S.R.
        </n-alert>
      </n-space>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, h } from "vue";
import { CashOutline as CashIcon } from "@vicons/ionicons5";
import { generate } from "@ant-design/colors";
import { useThemeStore } from "@/stores/models/theme";
import { NIcon } from "naive-ui";
import {
  BookOutline as BookIcon,
  PersonOutline as PersonIcon,
  WineOutline as WineIcon,
} from "@vicons/ionicons5";
import { findSubMenuByLabel } from "@/utils/findMenuLabelUtils.js";

const themeStore = useThemeStore();
const primaryColors = generate(themeStore.themeConfig.primary);
const primary1 = primaryColors[5];
const primary2 = primaryColors[4];
const primary3 = primaryColors[2];

function renderIcon(icon) {
  return () => h(NIcon, null, { default: () => h(icon) });
}

const activeKey = ref(null);
const collapsed = ref(false);

const menuOptions = [
  {
    label: "主面板",
    key: "a-wild-sheep-chase",
    icon: renderIcon(BookIcon),
  },
  {
    label: "财务管理",
    key: "hear-the-wind-sing",
    icon: renderIcon(BookIcon),
    children: [
      {
        label: "人事管理",
        key: "23",
      },
      {
        label: "事务管理",
        key: "32",
      },
    ],
  },
  {
    label: "用户管理",
    key: "pinball-1973",
    icon: renderIcon(BookIcon),
    children: [
      {
        label: "鼠",
        key: "rat",
      },
    ],
  },
  {
    label: "系统管理",
    key: "dance-dance-dance",
    icon: renderIcon(BookIcon),
    children: [
      {
        label: "人物",
        key: "people",
        children: [
          {
            label: "叙事者",
            key: "narrator",
            icon: renderIcon(PersonIcon),
          },
          {
            label: "羊男",
            key: "sheep-man",
            icon: renderIcon(PersonIcon),
          },
        ],
      },
      {
        label: "饮品",
        key: "beverage",
        icon: renderIcon(WineIcon),
        children: [
          {
            label: "威士忌",
            key: "whisky",
          },
        ],
      },
    ],
  },
];

//过滤出父菜单
const parentMenu = () => {
  const temp = [];
  // 遍历菜单
  menuOptions.forEach((item) => {
    // 判断是否是父菜单
    temp.push({
      label: item.label,
      key: item.key,
      icon: renderIcon(BookIcon),
    });
  });
  return temp;
};

// 选中的父菜单
const selectedParent = ref(null);

// 选择父菜单的函数
function selectParent(parent) {
  selectedParent.value = parent;
}

const parent = ref(false);
const currentChildren = ref(null);

const currentLabel = ref("");
const onUpdate = (key, item) => {
  currentChildren.value = null;
  //根据lable查询子菜单
  currentChildren.value = findSubMenuByLabel(menuOptions, item.label);
};
</script>
<style scoped lang='scss'>
.container {
  display: flex;
  height: 50vh;
  width: 100%;

  .parent-menu {
    width: 120px;
    height: 100%;
  }

  .activeLabel {
    background-color: v-bind(primary1);
  }

  .child-menu {
    flex: 1;
    height: 100%;
  }
}

.test {
  margin-bottom: 15px;
}

.layoutTest {
  width: 100px;
  height: 70px;
  border: 1px solid #ccc;
  padding: 5px;
  display: flex;

  .left {
    width: 18px;
    height: 100%;
    background-color: v-bind(primary1);
    border-radius: 4px;
  }

  .right {
    margin-left: 8px;

    .header {
      width: 60px;
      height: 16px;
      background-color: v-bind(primary2);
      border-radius: 4px;
    }

    .main {
      width: 60px;
      height: 34px;
      background-color: v-bind(primary3);
      border-radius: 4px;
      margin-top: 8px;
    }
  }
}

.carousel-bread {
  width: 100%;
  height: 240px;
  object-fit: cover;
}

.carousel-img {
  width: 100%;
  height: 240px;
  object-fit: cover;
}
</style>